<template>
    <div>
        <div style="display: flex;flex-direction: row;align-items: center;">
            <div style="font-size: 14px;text-align: right;" :style="{
                'width': titleWidth+'px'
            }">{{title}}</div>
            <div style="margin-left: 10px;" :style="{
                'width': sliderWidth+'px'
            }"><slot name="slider" /></div>
            <!-- <div style="margin-left: 16px;font-size: 14px;">{{result}}</div> -->
        </div>
    </div>
</template>

<script>
  export default {
    components: {
        
    },
    props:{
        result: {
            type: Number,
            default: 0
        },
        title:{
            type: String,
            default: ''
        },
        titleWidth:{
            type: [Number, String],
            default: '100'
        },
        sliderWidth: {
            type: [Number, String],
            default: '380'
        },
        min: {
            type: [Number, String],
            default: 0
        },
        max: {
            type: [Number, String],
            default: 750
        }
    },
    data() {
      return {

      }
    },
    methods:{
        insertAdvert(){
            this.$emit('insertAdvert')
        },
        deleteAdvert(index){
            this.$emit('deleteAdvert', index)
        },
        selectRoute(item){
            this.$emit('selectRoute', item)
        }
    }
  }
</script>

<style lang="scss" scoped>

</style>